<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            list-style: none;
        }

        .form-box {
            width: 800px;
            display: flex;
            margin: auto;
        }

        .search {
            flex-grow: 1;
            height: 35px;
            border: 2px solid #ff5555;
            padding-left: 5px;
            outline: none;
        }

        /* .search:focus~.search-ul {
            display: block;
        } */

        .form-box>button {
            width: 120px;
            height: 35px;
            border: 2px solid #ff5555;
            border-left: none;
            outline: none;
            background-color: #f55;
            color: #fff;
            cursor: pointer;
        }

        .search-ul {
            position: absolute;
            border: 1px solid #ababab;
            width: calc(800px - 120px);
            top: 35px;
            line-height: 24px;
            font-size: 90%;
        }

        .search-ul>li {
            padding-left: 5px;
            cursor: pointer;
        }

        .search-ul>li:hover {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <main>
        <div class="form-box">
            <input class="search" type="search" placeholder="搜索" >
            <button>搜索</button>
            <ul class="search-ul" hidden>
            </ul>
        </div>
    </main>
</body>
<script>
    let lis = document.querySelectorAll(".search-ul>li");
    let search = document.querySelector(".form-box>input");
    let ul = document.querySelector(".search-ul");
    let body = document.querySelector("body");

    let texts = [
        "银饰挂件","手机挂件","黄金挂件"
    ];

    // for (let v of lis) {
    //     v.addEventListener("click",handleLiClick);
    // }

    // 点击输入框
    search.addEventListener("focus",function(e) {
        ul.removeAttribute("hidden");  
    })


    search.addEventListener("input",function(e) {
        ul.innerHTML = "";

        // 数组的遍历函数：用于遍历数组
        texts.forEach(function(v) {
            // 创建li标签
            let li = document.createElement("li");
            // 添加li标签的内容
            li.innerText = v;
            // 给创建的li添加点击事件
            li.addEventListener("click",handleLiClick);
            // 把li添加到ul中
            ul.appendChild(li);
        })
    })

    // 失去焦点事件
    search.addEventListener("blur",function() {
        // console.log("我获取了焦点！！！！");
        // 延迟隐藏
        setTimeout(function() {
            ul.setAttribute("hidden",true);
        }, 300);
    })

    // 点击li
    function handleLiClick(e) {
        console.log("点击事件")
        let li = e.currentTarget;
        let value = li.innerText;
        let url = "https://s.taobao.com/search?q=" + value;
        // 跳转页面
        window.location = url;
    }

</script>
</html>